<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<TITLE>论坛</TITLE>
	<Link rel="stylesheet" type="text/css" href="style/style.css" />
	<Link rel="stylesheet" type="text/css" href="style/index.css" />
	<Link rel="stylesheet" type="text/css" href="style/post.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/bbs.js"></script>
</HEAD>

<BODY>
<div id="app">
	<bbs ref="a">
		<DIV class="t left">
			<TABLE cellSpacing="0" cellPadding="0" width="100%">
				<TR class="tr2" align="center">
					<TD colSpan="2">论坛</TD>
					<TD style="WIDTH: 10%;">主题</TD>
					<TD style="WIDTH: 30%">最后发表</TD>
				</TR>

				<template v-for=" b in boards">
					<!--       主版块       -->
					<TR class="tr3">
						<TD colspan="4">{{b.boardname}}</TD>
					</TR>
					<!--       子版块       -->
					<TR class="tr3" v-for=" sub in b.children">
						<TD width="5%">&nbsp;</TD>
						<TH align="left">
							<IMG :src="sub.imgData" width=26px height=29px>
							<A :href="'list.html?bid='+sub.id">{{sub.boardname}}</A>
						</TH>
						<TD align="center">{{sub.topicCnt}}</TD>
						<TH>
				<SPAN>
					<A href="detail.html">{{sub.maxTopic ? sub.maxTopic.title : ''}}</A>
				</SPAN>
							<BR/>
							<SPAN>{{sub.maxTopic ? sub.maxTopic.user.cname : ''}}</SPAN>
							<SPAN class="gray">[ {{sub.maxTopic ? sub.maxTopic.publishtime : ''}} ]</SPAN>
						</TH>
					</TR>
				</template>
			</TABLE>
		</DIV>
		<div class="right">
			<div slot="header" class="clearfix" align="center">
				<h1 style="color: white;">最新帖子</h1>
			</div>
			<!-- 渲染最新的帖子列表 -->
			<el-card class="box-card post" v-for="topic in topics" :key="topic.id">
				<el-row>
					<el-col :span="24">
						<h2 class="post-title">{{ topic.title }}</h2>
						<div class="post-content" v-html="truncateContent(topic.content)"></div>
						<el-link :href="'detail.html?id=' + topic.id" type="primary">阅读更多</el-link>
						<div style="color: green;">{{ topic.publishtime }}</div>
					</el-col>
				</el-row>
			</el-card>
		</div>

		<!-- 飘浮广告位 -->
		<div class="floating-image-container" :style="{ transform: `translate(${position.x}px, ${position.y}px)` }" v-if="!isHidden">
			<button class="close-button" @click="closeFloatingImage">×</button>
			<img src="image/head/1.gif" alt="Floating Image" class="floating-image">
		</div>
	</bbs>
	</main>
	<BR/>
	<CENTER class="gray">源辰信息</CENTER>
</div>
<script>
	var v = new Vue({
		el: "#app",
		data: {
			boards: [],
			topics: [],
			position: { x: 0, y: 0 },
			velocity: { vx: 0, vy: 0 },
			isHidden: false,
			speed: 2
		},
		created() {
			axios.get("board/query").then(res => {
				this.boards = res.data;
				console.log(this.boards)
			});
			axios.get("topic/latest").then(res => {
				this.topics = res.data;
			});
		},
		methods: {
			truncateContent(content) {
				return content.length > 100 ? content.substring(0, 100) + '...' : content;
			},
			getRandomPosition() {
				const maxWidth = window.innerWidth - 70;
				const maxHeight = window.innerHeight - 70;
				return {
					x: Math.random() * maxWidth,
					y: Math.random() * maxHeight
				};
			},
			getRandomVelocity() {
				const angle = Math.random() * 2 * Math.PI;
				return {
					vx: this.speed * Math.cos(angle),
					vy: this.speed * Math.sin(angle)
				};
			},
			updatePosition() {
				this.position.x += this.velocity.vx;
				this.position.y += this.velocity.vy;

				const maxWidth = window.innerWidth - 70;
				const maxHeight = window.innerHeight - 70;

				if (this.position.x < 0 || this.position.x > maxWidth) {
					this.velocity.vx *= -1;
				}
				if (this.position.y < 0 || this.position.y > maxHeight) {
					this.velocity.vy *= -1;
				}
			},
			moveImage() {
				requestAnimationFrame(this.moveImage);
				this.updatePosition();
			},
			closeFloatingImage() {
				this.isHidden = true;
			}
		},
		mounted() {
			this.position = this.getRandomPosition();
			this.velocity = this.getRandomVelocity();
			this.moveImage();
			window.addEventListener('resize', () => {
				this.position = this.getRandomPosition();
			});
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.getRandomPosition);
		}
	})

</script>
</BODY>
</HTML>